<template>
  <div class="background">
    <v-card
      class="Blur mx-auto pa-12 pb-8"
      elevation="8"
      max-width="448"
      rounded="lg"
    >
      <v-form validate-on="blur" v-model="valid">
        <div
          class="text-subtitle-1 text-left text-blue"
          style="margin-bottom: 6px; user-select: none"
        >
          账号
        </div>
        <v-text-field
          density="compact"
          v-model="account.username"
          :rules="userRules"
          placeholder="请输入账号"
          prepend-inner-icon="mdi-account-outline"
          variant="outlined"
          style="margin-bottom: 10px"
        ></v-text-field>
        <div
          class="text-subtitle-1 text-left text-blue"
          style="margin-bottom: 6px; user-select: none"
        >
          密码
        </div>
        <v-text-field
          v-model="account.password"
          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
          :rules="passRules"
          :type="visible ? 'text' : 'password'"
          density="compact"
          placeholder="请输入密码"
          prepend-inner-icon="mdi-lock-outline"
          variant="outlined"
          @click:append-inner="visible = !visible"
          style="margin-bottom: 6px"
        ></v-text-field>
        <v-btn
          @click="login"
          class="mb-0"
          color="blue"
          size="large"
          variant="tonal"
          style="margin-top: 10px; outline: none"
          block
        >
          登录
        </v-btn>
      </v-form>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//import { router } from '@/router'
import { useStore } from 'vuex'
import router from '@/router'
import { warningAlert } from '@/store/alert'

const valid = ref(false)

const account = ref({ username: '', password: '' })
const userRules = [
  (v: string) => !!v || '账号不能为空',
  (v: string) => (v && v.length >= 4) || '账号至少4位',
]
const passRules = [(v: string) => !!v || '密码不能为空']
const store = useStore()

function login() {
  if (valid.value) {
    console.log(account.value)

    store.dispatch('user/login', account.value).then(() => {
      console.log('login success')
      router.push('/')
    })
  } else {
    warningAlert('请输入合法账号密码')
  }
}

const visible = ref(false)
</script>

<style lang="scss" scoped>
.v-card {
  background-color: white;
  min-width: 400px;
  min-height: 250px;
}
.background {
  background-image: url('@/assets/background.jpg');
  background-position: center;
  display: flex;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.Blur {
  backdrop-filter: blur(6px);
  background-color: rgba(200, 200, 200, 0.4);
}
</style>
